<template>
  <div style="margin-top: 50px;">
    <div ref="dayOnlineChart" style="margin-top:20px;height: 240px;background-repeat: no-repeat;background-size:auto 100%;" :style="'background-image: url(' + require('@/assets/img/content-bg.png') + ');'">
    </div>
    <div style="position: relative;float: left;top: -255px;left: 190px;font-size: 17px;height: 25px;font-style: italic;">
      24小时能耗监控
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      list: [],
      chart: null,
      option: {
        grid: {
          left: '4.5%',
          right: '2%',
          bottom: '5.5%',
          containLabel: true
        },
        title: {
          left: '5%',
          top: '10%'
        },
        backgroundColor: '',
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              width: 1
            }
          },
          type: 'category',
          data: [
            '0', '1', '2', '3', '4', '5', '6','7', '8', '9',
            '10', '11', '12', '13', '14', '15', '16','17', '18', '19',
            '20', '21', '22', '23', '23'
          ],
          axisLabel: {
            fontSize: 13
          }
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              width: 1,
              show: true
            }
          },
          type: 'value',
          splitLine: { show: false},
          axisLabel: {
            fontSize: 13
          }
        },
        series: [
          {
            type: 'line',
            data: []
          }
        ]
      }
    }
  },
  name: "map-view",
  mounted() {
    this.fetchData()
    this.refreshData()
  },
  unmounted() {
  },
  methods: {
    refreshData: function () {
      setInterval(this.fetchData, 1000 * 60 * 10)
    },
    fetchData: function () {
      const fromDate = this.$getTimeInfo(new Date(new Date().getTime() - 1000 * 60 * 60 * 24));
      const data = {
        content: {
          fromDate: fromDate.year + '-' + fromDate.month + '-' + fromDate.day + ' ' + fromDate.hour + ':00:00',
          toDateType: 'hour'
        }
      }
      this.$axios({url:'/ems/client/index/energy/time/trend', data: data}).then((content) => {
        this.list = content.list
        this.initChart()
      })
    },
    initChart: function () {
      const list = this.list
      this.option.xAxis.data = [];
      this.option.series[0].data = [];
      for (let i = 0; i < list.length; i ++) {
        const item = list[i]
        this.option.xAxis.data.push(item.time);
        this.option.series[0].data.push(this.$doubleVal(item.increaseStandValue));
      }
      this.$nextTick(() => {
        this.chart = this.$echarts.init(this.$refs.dayOnlineChart, 'dark')
        this.chart.setOption(this.option)
      })
    }
  },
};
</script>
<style>
</style>
